﻿<%@ Page Title="" Language="VB" MasterPageFile="~/MasterIntranet_Uno.master" AutoEventWireup="false" CodeFile="IntraConsultasMenu.aspx.vb" Inherits="ConsultasMenu" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
         <link href="css/Callout.css" rel="stylesheet" type="text/css" /> 
              <link href="css/tab.css" rel="stylesheet" type="text/css" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
         <style type="text/css">
              .label1_bordeabajo2{
	                BORDER-BOTTOM: #1E365A 1px solid;
	                FONT-WEIGHT:bold; 
	                FONT-SIZE: 12px; 
	                COLOR: #383A3E; 
	                FONT-FAMILY:Verdana, Arial, Helvetica, sans-serif; 
	                PADDING:3px;
	                background-color:#F1F3F3 
                }
                
                .contenido {
	                FONT-SIZE: 11px; 
	                COLOR: #000000; 
	                text-align:left;
	                vertical-align:middle;
	                FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                }
                
                   .contenidoBlanco {
	                FONT-SIZE: 11px; 
	                COLOR: white; 
	                text-align:left;
	                vertical-align:middle;
	                FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                }

                .contenidoSubtitulo {
	                FONT-SIZE: 13px; 
	                COLOR: #000000; 
	                text-align:right;
	                FONT-WEIGHT: bold; 
	                FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                }

                .contenido2 {
	                FONT-SIZE: 12px; 
	                COLOR: #000000; 
	                FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	                text-align:right;
	                FONT-WEIGHT:normal; 
                }
                .botonNormal{
	                cursor:hand;
	                FONT-WEIGHT: normal; 
	                FONT-SIZE: 11px; 
	                COLOR: #333333; 
	                BORDER-LEFT: #AAABB4 1px solid; 
	                BORDER-BOTTOM: #AAABB4 1px solid; 
	                BORDER-RIGHT:  #AAABB4 1px solid; 
	                BORDER-TOP:   #AAABB4 1px solid;
	                FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	                BACKGROUND-COLOR: #EEEEEE; 
	                PADDING:3px; 
	                TEXT-ALIGN:center;
                    }
                    .botonNormalGrande {
	                    border: 1px solid #b2b2b2;
	                    padding: 3px 1px;
	                    BACKGROUND: #f4f4f4; 
	                    MARGIN: 1px; 
	                    FONT: 13px Verdana, Arial, Helvetica, sans-serif; 
	                    COLOR: #000;
	                    cursor:hand;
	                    height: 30px;
                    }
            
         </style>
         <script language="javascript" type="text/javascript"  >

      $(document).ready(function () {
          $("#tabs").tabs();
          $('#tabs').tabs('select', 0);

          //$("#tabs").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
          $("#tabs").tabs({ fx: { opacity: "toggle"} });
      });

      // --------------------------------

      $(document).ready(function () {
          $("#tabs").tabs();
          $('#tabs').tabs('select', 0);

          //$("#tabs").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
          $("#tabs").tabs({ fx: { opacity: "toggle"} });
      });



      function MostrarTooltip(idObject) {

          var obj = document.getElementById(idObject);

          document.getElementById("tooltip").innerHTML = obj.options[obj.selectedIndex].text;

          if (obj.options[obj.selectedIndex].value != "") {
              //Formato Tooltip 
              document.getElementById("tooltip").style.zIndex = 9999999;
              document.getElementById("tooltip").style.display = "inline";
              document.getElementById("tooltip").style.position = "absolute";
              document.getElementById("tooltip").style.border = "ActiveBorder  1px	solid";
              document.getElementById("tooltip").style.padding = "3px";
              document.getElementById("tooltip").style.fontSize = "10px";
              document.getElementById("tooltip").style.fontFamily = "Verdana";
              document.getElementById("tooltip").style.backgroundColor = "LemonChiffon";
              document.getElementById("tooltip").style.top = event.y + 10 + "px";
              document.getElementById("tooltip").style.left = 5 + event.x;
          }
      }

      // ---------------------------------

      function OcultarTooltip() {
          document.getElementById("tooltip").style.display = "none";
      }

      $("#hidr").click(function () {
          $("span:last-child").hide("fast", function () {
              // use callee so don't have to name the function
              $(this).prev().hide("fast", arguments.callee);
          });
      });
      $("#showr").click(function () {
          $("span").show(2000);
      });
  
  </script>
         <script language="javascript" type="text/javascript"  >

             $(function () {

                 getTabla();


             });


      // GetTabla1
      function getTabla() {

    
          var cabeceras = new Array();
          var table = document.getElementById('ContentPlaceHolder1_GridView1');
          var Subtitulo = "";
          var IntValores = new Array();
          var pos = 0;

          try {
             
              totalLineas = parseInt(table.rows.length - 1);
              totalColumna = table.rows[0].cells.length;
          }
             catch (x) {
              totalLineas = 0;
              totalColumna = 0;
              // alert(x);
              return;
          }

          var Titulo = "Venta de Celulares por modelo"

          for (i = 1; i <= totalLineas; i++) {
              var intTotal = 0
              var cabeceraNom;
              cabeceraNom = table.rows[i].cells[0].innerHTML;
              intTotal = parseInt(table.rows[i].cells[1].innerHTML);
              IntValores[pos] = intTotal;
              cabeceras[pos] = cabeceraNom;
              pos++;
          }

          setTimeout(function () { getChart(cabeceras, IntValores, 'container1', Titulo, totalLineas, Subtitulo); }, 1000)
      }

      function getModEsc() {

      }

      //------------------------------------ 
      function getChart(cabeceras, IntValores, strContainer, Titulo,totalLineas, SubTitulo) {

          var options;

          options = {
              chart: { renderTo: strContainer,
                  type: 'column'
              },
              title: { text: Titulo,
                  style: {
                      fontSize: '20px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              },
              subtitle: { text: SubTitulo,
                  style: {
                      fontSize: '14px',
                      fontFamily: 'Verdana, sans-serif'
                  }
              },
              xAxis: {

                  categories: cabeceras,


                  labels: {
                      rotation: -65,
                      align: 'right',
                      style: {
                          fontSize: '11px',
                          fontFamily: 'Verdana, sans-serif'
                      }
                  }
              },

              yAxis: { min: 0,
                  title: {
                      text: 'Vts',
                      align: 'high'
                  },
                  labels: { overflow: 'justify' }
              },
              tooltip: {
                  formatter: function () {
                      return '' +
                this.series.name + ': ' + this.y + ' Vendidos';
                  }
              },
              plotOptions: {
                  bar: { dataLabels: { enabled: true} }
              },
              legend: { maxHeight:44
              },
              credits: {
                  enabled: false
              },
              series: []
          };

          options.xAxis = new Array();
          options.xAxis[0] = new Object();
          options.xAxis[0].categories = ' Venta de celulares X modelo ';

          options.series = new Array();

          for (i = 1; i <= totalLineas; i++) {
              var pos = i - 1;
              var variable = parseInt(IntValores[pos]);
              options.series[pos] = new Object();
              options.series[pos].name = cabeceras[pos];
              options.series[pos].data = [variable];

          }

          var chart = new Highcharts.Chart(options);


      }
        
    </script>

    
    <script src="js/Scorcard/js/highcharts.js" type="text/javascript"></script>
    <script src="js/Scorcard/js/highcharts-more.js" type="text/javascript"></script>
    <script src="js/Scorcard/js/modules/exporting.js" type="text/javascript"></script>
  
    <table style="width:100%; text-align:center;" >
        <tr>
            <td style="width:6%;"></td>
            <td style="width:10%;"></td>
            <td style="width:24%;"></td>
            <td style="width:10%;"></td>
            <td style="width:24%;"></td>
            <td style="width:20%;"></td>
            <td style="width:6%;"></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="5">
                 <div style="width:100%;" >
        
        <div id="tabs" style="width:99%;float:left;" >
            
            <ul style="width:99%;" >
                <li>
                    <a href="#fragment-1">
                        Transacciones
                    </a></li>
                <li>
                    <a href="#fragment-2">
                        <span>Stock</span>
                    </a>
                </li>
            </ul>
            
            <div id="tooltip" ></div>
            
            <!-- ===== INICIO TAB1 =======================================================  -->
                 <div id="fragment-1" style="float:left;width:100%;" >

                        <div style="float:left;width:100%;" >
                            <table width="99%">
                                 <tr>
                                    <td class="label1_bordeabajo2" > Celulares vendidos por modelo </td>
                                </tr>
                            </table>

                            <fieldset>
                                <legend> <asp:Label ID="lblBusqueda" runat="server" Text="Busqueda" ForeColor="White" CssClass="contenido"></asp:Label>
                                </legend>
                                 <table style="width:100%; text-align:center;" >
                                        <tr>
                                            <td style="width:6%;"></td>
                                            <td style="width:10%;"></td>
                                            <td style="width:24%;"></td>
                                            <td style="width:10%;"></td>
                                            <td style="width:24%;"></td>
                                            <td style="width:20%;"></td>
                                            <td style="width:6%;"></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td><asp:Label ID="lblModelo" runat="server" Text="Modelo: " CssClass="contenidoBlanco"></asp:Label></td>
                                            <td align="left"> <asp:DropDownList ID="CbModelo" runat="server" CssClass="contenido" Width="80%"></asp:DropDownList> </td>
                                            <td></td>
                                            <td align="left"> <asp:Button  ID="btnProcesar" runat="server" Text="Consultar" CssClass="botonNormal" Width="60%"/>  </td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                 </table>
                            </fieldset>
                            
                              <table style="width:100%; text-align:center;" >
                                        <tr>
                                            <td style="width:6%;"></td>
                                            <td style="width:15%;"></td>
                                            <td style="width:19%;"></td>
                                            <td style="width:10%;"></td>
                                            <td style="width:24%;"></td>
                                            <td style="width:20%;"></td>
                                            <td style="width:6%;"></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" valign="top" style="height:320px;">
                                                  <div style="width:100%; height:290px; overflow:scroll; vertical-align:top;" >
                                                      <asp:GridView ID="GridView1" runat="server" BackColor="White" 
                                                    BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" 
                                                    ForeColor="Black" GridLines="Vertical" CssClass="contenido" Width="97%">
                                                    <AlternatingRowStyle BackColor="#CCCCCC" />
                                                    <FooterStyle BackColor="#CCCCCC" />
                                                    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                                                    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                                                    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                                                    <SortedAscendingCellStyle BackColor="#F1F1F1" />
                                                    <SortedAscendingHeaderStyle BackColor="#808080" />
                                                    <SortedDescendingCellStyle BackColor="#CAC9C9" />
                                                    <SortedDescendingHeaderStyle BackColor="#383838" />
                                                </asp:GridView>
                                                  </div>
                                            </td>
                                            <td colspan="5" valign="top" style="height:320px;">
                                            
                                                   <div id="container1"  style="width:100%; vertical-align:top; height:290px; overflow:scroll;"></div>

                                            </td>
                                        </tr>

                              </table>

                        </div>
           
                 </div>
            <!-- ===== FIN TAB1 =========================================================  -->
            
            <!-- ===== INICIO TAB2 =======================================================  -->
            <div id="fragment-2" style="float:left;width:100%;" >
  
                       <div style="float:left;width:100%;" >
                          BYE
                       </div>

            </div>
            <!-- ===== FIN TAB2 =========================================================  -->
    
         </div>
      </div>
            </td>
            <td></td>
        </tr>
    </table>
    
</asp:Content>

